<template>
  <div>
    <div class="main_content">
       <el-form id="s_form" :model="searchForm" :inline="true" ref="searchForm">
        <el-form-item prop="searchText">
          <el-input
            style="width:200px;" size='medium'
            clearable
            v-model="searchForm.searchText"
            placeholder="请输入查询关键字"
            @keydown.enter.native="doSearch()"
          ></el-input>
          <el-button  size='medium' type="primary" @click="doSearch()" class="added" style='margin-left:15px;'>
            <i class="el-icon-search"></i>
            搜索
          </el-button>
          <el-button size='medium' v-if="showBack && searchForm.searchText" @click="doReturn()">
            <i class="el-icon-back"></i>
            清空
          </el-button>
        </el-form-item>
       </el-form>
      <myTable
        style="margin-top:15px"
        auto='getAllList'
        :dad-son='[$1,"mainTable"]'
        :height="280"
        min-width='130'
        :myColumn=tableProp
        ahide='index,checkbox,mySplitPage,tooltip,background'
        hide='checkbox'
        slots='操作,90,right'
        select='console'
        hook:created=' myTable.tableData = tableData '
        >
        <template slot-scope='button'>
          <el-button type="success" size="mini" @click="handleDetail(button.scope.$index, button.scope.row)">
            <i class="el-icon-view"></i>
            详 情
          </el-button>
          <el-button v-if="showEdit" type="success" size="mini" @click="edit(button.scope.$index, button.scope.row)">
           修 改
          </el-button>
          <el-button v-if="showAlarm" type="success" size="mini" @click="alarm(button.scope.$index, button.scope.row)">
           报 警
          </el-button>
        </template>
      </myTable>
      <div style="margin-top:60px;">
        <el-form id="sys_projectDetails" :model="searchForm2" :inline="true" ref="searchForm2" size="mini">
          <el-form-item prop="theDate">
            <el-date-picker
              v-model="searchForm2.theDate"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              value-format="yyyy-MM-dd"
              >
            </el-date-picker>
            <el-button type="primary" @click="doSearch2()" class="added">
              <i class="el-icon-search"></i>
              搜索
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-if="showBack2" @click="doReturn2()">
              <i class="el-icon-back"></i>
              返回
            </el-button>
          </el-form-item>
        </el-form>
      </div> 
      <el-row style="margin-top:10px;">
        <el-col :span="12" style="padding-right:5px;">
          <div id="myChart2" class="zhu_charts" :style="{width: '100%', height: '400px'}"></div>
        </el-col>
         <el-col :span="12" style="padding-left:5px;">
          <div id="myChart" class="bing_charts" :style="{ width: '100%',height: '370px'}"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import myhttp, {
  isEmpty,
  msgError,
  msgSuccess,
  msgWarning
} from "../../utils/myhttp";
import qs from "qs";
import api from "../../utils/api";
export default {
  data() {
    return {
      //时间
      pickerOptions: {
        shortcuts: [{
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 120);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      searchForm2:{
        theDate:'',
      },
      // theDate:"",
      loading: "",
      tableHeaderStyle: {
        //表头样式
        "background-color": "rgb(242,242,242)"
      },
      searchForm:{
        searchText: "", //搜索字段
      },
      tableData: [],
      tableProp: [
        { label: "项目所在地", prop: "area", sort:true },
        { label: "项目名称", prop: "projectName", sort:true },
        { label: "创建时间", prop: "createTime", sort:true,width:180},
        { label: "项目开始日期", prop: "createTime", sort:true,width:180 },
        { label: "项目管理员", prop: "projectLeaderName", sort:true },
        { label: "编号", prop: "projectNumber"},
        { label: "状态", prop: "projectState", sort:true, html(prop) {
          if( prop === 1 ) { 
            return '<span style="color:red">正在进行</span>'
          } else if( prop === 2 ) { 
            return '<span style="color:blue">已完成</span>'
          } else if( prop === 0)
            return '<span style="color:green">未开始</span>'
        } },
        { label: "团队成员", prop: "projectUserInfoList", html(prop){
          return Return(prop,(a,v)=>a+'、'+v.userName,'').slice(1);
        } },
        { label: "旁站次数", prop: "stationNumber"},
        { label: "创建人", prop: "createPerson"},

      ],
      isEdit:false,
      myChartData2:[],
      myChartData:[],
      pieData:[],
      legendData:[],
      showBack2:false,
      showBack:false,
      showEdit:false,
      showAlarm:false,
      user_all:"",
      agency:"",
      engineer:"",
      supervisor:"",
      symbol:"",
      symbol3:"",
      symbol4:"",
    };
  },
  components: {},
  mounted(){
    this.drawLine();
    this.drawLine2();
  },
 updated: function() {
    this.drawLine();
    this.drawLine2();
  },
  methods: {
    //时间搜索
    doSearch2(){
      this.getAllList();
      this.showBack2 = true;
    },
    //隐藏 修改 对应柱状图点击
    edit(index,row){
      var data = row.projectUserInfoList || [];
      var str = '';
      for(var i = 0; i < data.length; i++){
        this.alldata = data[i];
        if(data[i].positionType === '1'){
          // this.userName = data[i].userName
          // this.phoneNumber = data[i].phoneNumber
          // str += '、' + data[i].userName + '  ' + data[i].phoneNumber;
          // str += '、' + (data[i].userName);
          this.user_all = data[i].userName
        }
      };
      this.$router.push({
        name: "projectLogDetails",
         params: { 
          user_all: this.user_all,
          project_name: row.projectName,
          programme_name: row.programmeName,
          project_number: row.projectNumber,
          project_id: row.projectId,
        }
      })
    },
    //隐藏 报警 对应柱状图点击
    alarm(index,row){
      var data = row.projectUserInfoList || [];
      var str = '';
      for(var i = 0; i < data.length; i++){
        this.alldata = data[i];
        if(data[i].positionType === '1'){
          // this.userName = data[i].userName
          // this.phoneNumber = data[i].phoneNumber
          // str += '、' + data[i].userName + '  ' + data[i].phoneNumber;
          // str += '、' + (data[i].userName);
          this.user_all = data[i].userName
        }
      };
      this.$router.push({
        name:'projectRecordDetails',
        params: {
          user_all: this.user_all,
          project_name: row.projectName,
          programme_name: row.programmeName,
          project_number: row.projectNumber,
          project_id: row.projectId,
        }
      });
    },
    doReturn2(){
      this.$refs.searchForm2.resetFields()
      this.getAllList();
      this.showBack2 = false;
    },
    doReturn(){
      this.$refs.searchForm.resetFields()
      this.getAllList();
      this.showBack = false;
    },
    //柱状图
    drawLine2(){
      //初始化echarts实例
      let projectNameEcharts = []; //项目名称
      let numbers = []; //数量
      let modifitys = [];//修改次数
      let alarmsNumbers = [];//报警次数
      this.myChartData2.forEach(function(item) {
        // console.log(item);
        projectNameEcharts.push(item.projectName); //项目名称
        numbers.push(item.stationNumber); //数量
        modifitys.push(item.modificationNumber);//修改次数
        alarmsNumbers.push(item.alarmsNumber);
      });
  
      let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
      myChart2.off('click');//清除多次触发
      // 绘制图表
      // myChart2.setOption({
      var option = {
        title: { text: "旁站列表数据" },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          top:"6%",//图例位置
          data: ['旁站次数','修改次数','报警次数']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: projectNameEcharts,
          axisLabel: {
            interval:0,//x轴数据全部显示
            rotate:-30,//缩小数据倾斜
          },
        },
        yAxis: {
          type: "value",
          name: "数量"
        },
        series: [
          {
            name:'旁站次数',
            data: numbers,
            type: "bar",
            barGap:'10%',//柱图间距
          },
          {
            name:'修改次数',
            data:modifitys,
            type:"bar",
          },
          {
            name:'报警次数',
            data:alarmsNumbers,
            type:"bar",
          }
        ], 
      // });
      }
      //响应式
      myChart2.setOption(option);
		  window.addEventListener("resize",function(){
        myChart2.resize(true);
      });
      //点击事件
      myChart2.on('click', (params)=>{
        if(params.seriesName == '旁站次数'){
          this.handleDetail(params.dataIndex,this.mainTable.tableData[params.dataIndex]);
        }else if(params.seriesName == '修改次数'){
          this.edit(params.dataIndex,this.mainTable.tableData[params.dataIndex]);
        } else {
          // this.$router.push({
          //   name: "recordDetails",
          // });
          this.alarm(params.dataIndex,this.mainTable.tableData[params.dataIndex]);
        }
      });
    },

    //饼图
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let projectNameEcharts = []; //项目名称
      let numbers = []; //数量
      let myChart = this.$echarts.init(document.getElementById("myChart")); // 绘制图表
      // myChart.setOption({
      var option2 = {
        title: { 
          text:'旁站报表占比',
          x:'center' 
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: 'scroll',
	        orient: 'horizontal',
	        show: true,
          right: 0,
          top: "92%",
          bottom: '5%',//图例排放距离
          x: 'left',
          y: 'center',
          // textStyle: {
          //   fontSize: 12
          // },
        },
        series: [
          {
            name: "旁站报表占比",
            type: "pie",
            radius: "65%",
            center: ['55%', '54%'],
            data: this.pieData,
            minAngle: 5,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true,   //是否启用防止标签重叠策略
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              normal:{
                labelLine:{
                  length:1 
                }
              }
            },
          }
        ]
      // });
      };
      //响应式
      myChart.setOption(option2);
		  window.addEventListener("resize",function(){
		    myChart.resize();
		  });
    },
    //详情
    handleDetail(index,row) {
      var data = row.projectUserInfoList;
      var str = '';
      var str2 = '';
      var str3 = '';
      var str4 = '';
      for(var i = 0; i < data.length; i++){
        this.alldata = data[i];
        if(data[i].positionType === '1'){
          this.user_all = (data[i].userName || "");
        } else if(data[i].positionType === '2'){
        this.agency = (data[i].positionName ||"") + ' -- ';
          str2 += '、' + (data[i].userName||"");
          this.symbol = '；';
        } else if(data[i].positionType === '3'){
          this.engineer = (data[i].positionName ||"") + ' -- ';
          str3 += '、' + (data[i].userName||"");
          this.symbol3 = '；';
        } else if(data[i].positionType === '4'){
          this.supervisor = (data[i].positionName ||"") + ' -- ';
          str4 += '、' + (data[i].userName||"") ;
          this.symbol4 = '；';
        }
      };
      this.$router.push({
        name: "projectRecord3",
        params: { 
          user_all: this.user_all,
          project_name_record: row.projectName,
          // programme_name: row.programmeName,
          project_number: row.projectNumber,
          project_id: row.projectId,
          user_all2: str2.slice(1),
          user_all3: str3.slice(1),//监理工程师
          user_all4: str4.slice(1),//监理员
          agency: this.agency,
          engineer: this.engineer,
          supervisor: this.supervisor,
          symbol: this.symbol,
          symbol3: this.symbol3,
          symbol4: this.symbol4,
        }
      });
    },
    openLoading() {
      //loading请求等待
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    getAllList: async function(pageNum,pageSize) {
      var res = await $.post('getAllProject',{
        pageNum, //当前页 
        pageSize,//每页显示条数 
        searchText: this.searchForm.searchText,//搜索文本
        startTime: this.searchForm2.theDate[0], //开始日期
        endTime: this.searchForm2.theDate[1], //结束日期
      });
      $return('__',res);
      // if(!res.success) return $.msgError(res.msg||'error!');
      this.myChartData2 = res.items;
        if (this.myChartData2.length > 0) {
          this.drawLine2();
        }
      this.myChartData = res.items;
      this.pieData.length = this.legendData.length = 0;//为防止饼图数据多次重复渲染，数据清空
      for(var i=0;i<this.myChartData.length;i++){
        var temp = {};
        temp.value = this.myChartData[i].stationNumber;
        temp.name = this.myChartData[i].projectName;
        this.pieData.push(temp);
        this.legendData.push(this.myChartData[i].stationNumber);
      }
      if (this.myChartData.length > 0) {
        this.drawLine();
      }    
    },
    doSearch(){
      this.getAllList();
      this.showBack = true;
    }
  },
  created() {},
};
</script>
<style scoped>
  .assignment_parent{
    width:193px;
    padding:12px;
    background:#E1E1E1
  }
  .child_div{
    text-align:center;
    padding:0 10px;
    background:#FAFAFA;
    margin-bottom:8px;
  }
  .child_div_last{
    text-align:center;
    padding:0 10px;
    background:#FAFAFA;
  }
  .child_div span,
  .child_divTwo span
  {
    color:#000;
  }
  .child_div_last span,
  .child_div_lastTwo span
  {
    color:#000;
  }
  /*显示隐藏表格*/
  .showTable{
    border:1px solid #d4d4d4;
    margin-top:10px;
    width:73%;
    margin-left:110px;
  }
  .table_row{
    border-bottom:1px solid #d4d4d4;
    padding:10px 0 10px 20px;
  }
  /*修改 二级隐藏表格*/
  .showTableTwo{
    border:1px solid #d4d4d4;
  }
  .child_divTwo{
    text-align:center;
    padding:6px 10px;
    background:#FAFAFA;
    margin-bottom:8px;
  }
  .child_div_lastTwo{
    text-align:center;
    padding:6px 10px;
    background:#FAFAFA;
  }
  /*新增 供应商选择 分页*/
  .page_div{
    border-top:1px solid #d4d4d4;
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    padding:10px 10px 0 10px;
  }
  .page_i{
    /*background:#7BB6D5;*/
    background: #367FA8;
    height:24px;
    padding:0 5px;
    cursor: pointer;
    border-radius: 50%;
  }
  .page_i:hover {
    opacity: 0.8
  }

  .page_i_color{
    line-height:24px;
    color:#fff
  }
  /*饼图*/
  .bing_charts,.zhu_charts{
    border:1px solid #d4d4d4;
    border-radius: 3px;
  }
</style>


